<!-- eslint-disable vue/no-parsing-error -->
<script setup lang='ts'>
import { ref, onMounted } from "vue";
import useStore from "@/store";
import { IPersonConfig } from "@/types/storeType";
import { storeToRefs } from "pinia";
import * as XLSX from "xlsx";
import { readFileBinary } from "@/utils/file";
import { addOtherInfo } from "@/utils";
import DaiysuiTable from "@/components/DaiysuiTable/index.vue";

const personConfig = useStore().personConfig;
const {
  getAllPersonList: allPersonList,
  getAlreadyPersonList: alreadyPersonList,
} = storeToRefs(personConfig);
const limitType = ".xlsx,.xls";
// const personList = ref<any[]>([])

const resetDataDialog = ref();
const delAllDataDialog = ref();

const handleFileChange = async (e: Event) => {
  let dataBinary = await readFileBinary(
    ((e.target as HTMLInputElement).files as FileList)[0]!
  );
  let workBook = XLSX.read(dataBinary, { type: "binary", cellDates: true });
  let workSheet = workBook.Sheets[workBook.SheetNames[0]];
  const excelData = XLSX.utils.sheet_to_json(workSheet);
  const allData = addOtherInfo(excelData);
  personConfig.resetPerson();
  personConfig.addNotPersonList(allData);
};
const exportData = () => {
  let data = JSON.parse(JSON.stringify(allPersonList.value));
  // 排除一些字段
  for (let i = 0; i < data.length; i++) {
    delete data[i].x;
    delete data[i].y;
    delete data[i].id;
    delete data[i].createTime;
    delete data[i].updateTime;
    delete data[i].prizeId;
    // 修改字段名称
    if (data[i].isWin) {
      data[i].isWin = "是";
    } else {
      data[i].isWin = "否";
    }
    // 格式化数组为
    data[i].prizeTime = data[i].prizeTime.join(",");
    data[i].prizeName = data[i].prizeName.join(",");
  }
  let dataString = JSON.stringify(data);
  dataString = dataString
    .replaceAll(/uid/g, "编号")
    .replaceAll(/isWin/g, "是否中奖")
    .replaceAll(/department/g, "部门")
    .replaceAll(/name/g, "姓名")
    .replaceAll(/identity/g, "身份")
    .replaceAll(/prizeName/g, "获奖")
    .replaceAll(/prizeTime/g, "获奖时间");

  data = JSON.parse(dataString);

  if (data.length > 0) {
    const dataBinary = XLSX.utils.json_to_sheet(data);
    const dataBinaryBinary = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(dataBinaryBinary, dataBinary, "Sheet1");
    XLSX.writeFile(dataBinaryBinary, "data.xlsx");
  }
};

const resetData = () => {
  personConfig.resetAlreadyPerson();
};

const deleteAll = () => {
  personConfig.deleteAllPerson();
};

const delPersonItem = (row: IPersonConfig) => {
  personConfig.deletePerson(row);
};

const tableColumns = [
  {
    label: "编号",
    props: "uid",
  },
  {
    label: "姓名",
    props: "name",
  },
  {
    label: "部门",
    props: "department",
  },
  {
    label: "身份",
    props: "identity",
  },
  {
    label: "是否已中奖",
    props: "isWin",
    formatValue(row: IPersonConfig) {
      return row.isWin ? "是" : "否";
    },
  },
  {
    label: "操作",
    actions: [
      // {
      //     label: '编辑',
      //     type: 'btn-info',
      //     onClick: (row: any) => {
      //         delPersonItem(row)
      //     }
      // },
      {
        label: "删除",
        type: "btn-error",
        onClick: (row: IPersonConfig) => {
          delPersonItem(row);
        },
      },
    ],
  },
];
onMounted(() => {});
</script>

<template>
  <dialog id="my_modal_1" ref="resetDataDialog" class="border-none modal">
    <div class="modal-box">
      <h3 class="text-lg font-bold">提示!</h3>
      <p class="py-4">该操作会清空人员中奖信息，是否继续？</p>
      <div class="modal-action">
        <form method="dialog" class="flex gap-3">
          <!-- if there is a button in form, it will close the modal -->
          <button class="btn" @click="resetDataDialog.close()">取消</button>
          <button class="btn" @click="resetData">确定</button>
        </form>
      </div>
    </div>
  </dialog>
  <dialog id="my_modal_1" ref="delAllDataDialog" class="border-none modal">
    <div class="modal-box">
      <h3 class="text-lg font-bold">提示!</h3>
      <p class="py-4">该操作会删除所有人员数据，是否继续？</p>
      <div class="modal-action">
        <form method="dialog" class="flex gap-3">
          <!-- if there is a button in form, it will close the modal -->
          <button class="btn" @click="delAllDataDialog.close()">取消</button>
          <button class="btn" @click="deleteAll">确定</button>
        </form>
      </div>
    </div>
  </dialog>
  <div class="min-w-1000px">
    <h2>人员管理</h2>
    <div class="flex gap-3">
      <button
        class="btn btn-error btn-sm"
        @click="delAllDataDialog.showModal()"
      >
        全部删除
      </button>
      <div
        class="tooltip tooltip-bottom"
        data-tip="下载文件后，请在excel中填写数据，并保存为xlsx格式"
      >
        <a
          class="no-underline btn btn-secondary btn-sm"
          download="人口登记表.xlsx"
          target="_blank"
          href="/大锤精选(剩余26天) 倪选（剩余3天）
/人口登记表.xlsx"
          >下载模板</a
        >
      </div>
      <div class="">
        <label for="explore">
          <div class="tooltip tooltip-bottom" data-tip="上传修改好的excel文件">
            <input
              type="file"
              class=""
              id="explore"
              style="display: none"
              @change="handleFileChange"
              :accept="limitType"
            />

            <span class="btn btn-primary btn-sm">导入人员数据</span>
          </div>
        </label>
        <!-- <button class="btn btn-primary btn-sm">上传excel</button> -->
      </div>
      <button class="btn btn-error btn-sm" @click="resetDataDialog.showModal()">
        重置人员数据
      </button>
      <button class="btn btn-accent btn-sm" @click="exportData">
        导出结果
      </button>
      <div>
        <span>中奖人数：</span>
        <span>{{ alreadyPersonList.length }}</span>
        <span>&nbsp;/&nbsp;</span>
        <span>{{ allPersonList.length }}</span>
      </div>
    </div>
    <DaiysuiTable
      :tableColumns="tableColumns"
      :data="allPersonList"
    ></DaiysuiTable>
  </div>
</template>

<style lang='scss' scoped></style>
